import React, { useState } from 'react'
import { Button, Input, Form, Toast, NavBar } from 'react-vant'
import { useNavigate } from "react-router-dom"
import axios from "../uilst/axios"
type Props = {}

const Longin = (props: Props) => {
  const [form] = Form.useForm()
  const navigate = useNavigate()

  const onFinish = async (values: any) => {
    console.log(values);
    const res = await axios.post("/login", values);
    console.log(res);
    if (res.data.code === 200) {
      Toast.success(res.data.msg);
      localStorage.setItem("token", res.data.token);
      localStorage.setItem("username", values.username);
      navigate("/home/home");
    } else {
      Toast.fail(res.data.msg);
      navigate("/register");
    }
  };


  return (
    <div className='longin'>
      <NavBar
        title='登录'
        leftText='返回'
        onClickLeft={() => navigate(-1)}
      />
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button round nativeType='submit' type='primary' block>
              登录
            </Button>
            <Button round type='primary' block style={{ marginTop: '10px' }} onClick={() => navigate("/register")}>
              注册
            </Button>
          </div>
        }
      >
        <Form.Item
          rules={[{ required: false, message: '请填写用户名' }]}
          name='username'
          label='用户名&nbsp;:'
        >
          <Input placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          rules={[{ required: false, message: '请填写密码' }]}
          name='password'
          label='密码&emsp;&nbsp;:'
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Longin